<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.0/vue.js"></script>
    <style>
      [v-cloak] {
        display: none;
      }
    </style>
  </head>
  <body>
    <h1 id="app">Your name is {{message}}</h1>
    <h1>ListData列表数据</h1>
    <div id="app2">
      <ul>
        <li v-for="item in arr">{{item}}</li>
      </ul>
      <div>{{count}}</div>
      <button v-on:click="upCount">+</button>
      <button v-on:click="deCount">-</button>
    </div>
    <hr />
    <!-- v-once只渲染一次,v-html危险,v-pre 未渲染,v-cloak  -->
    <div id="app3" v-cloak>
      {{name}} say {{say}}
      <div v-once>v-once:{{name}}</div>
      <div v-html="url">v-html:连接</div>
      <div v-pre>v-pre:{{name}} say {{say}}</div>
    </div>
    <script>
      let app = new Vue({
        el: '#app',
        data: {
          message: 'Xu'
        }
      });
      //   列表以及计时器
      let app2 = new Vue({
        el: '#app2',
        data: {
          arr: ['一个人', '两只羊', '三只树'],
          count: 0
        },
        methods: {
          upCount: function () {
            this.count++;
          },
          deCount: function () {
            this.count--;
          }
        }
      });
      // v-once v-html v-pre v-cloak 一次/解析标签/不解析/createdbefore css
      // setTimeout(() => {
      //   let app3 = new Vue({
      //     el: '#app3',
      //     data: {
      //       name: 'xu',
      //       say: 'hello',
      //       url: '<a href="baidu.com">连接</a>'
      //     }
      //   });
      // }, 2000);
    </script>
  </body>
  <!-- 双向数据绑定 数据=》视图=》数据 -->

  <div id="app5">
    <p>{{msg}}</p>
    <input type="text" v-model="msg" />
    <label for="check">{{checked}}</label>
    <input type="checkbox" id="check" v-model="checked" />
    <select name="select" v-model="optionValue">
      <option v-for="(item,key) in obj" :value="item.money" :key="item.name">{{item.name}}</option>
    </select>
    {{optionValue}}
  </div>
  <script>
    let app5 = new Vue({
      el: '#app5',
      data: {
        msg: '666',
        checked: false,
        optionValue: '',
        arr: [2000, 2001, 2002, 2003],
        obj: [
          { name: 'xu', money: 111 },
          { name: 'xu2', money: 888 },
          { name: 'xu3', money: 0 }
        ]
      },
      created() {
        this.optionValue = this.obj[0]['money'];
      },
      methods: {}
    });
  </script>
  <!-- watch 监听数据变化 浅与深 -->
  <hr />
  <div id="app6">
    <p>{{msg}}</p>
    <button @click="obj[0].name='nb'">{{obj[0].name}}</button>
    <input type="text" v-model="msg" />
  </div>
  <script>
    let app6 = new Vue({
      el: '#app6',
      data: {
        msg: '',
        obj: [{ name: 'xu', now: 20 }]
      },
      watch: {
        msg: function (newV, oldV) {
          if (newV < 100) {
            console.log('太小了');
          }
          console.log(newV);
        },
        // 深度监视 obj arr
        obj: {
          deep: 'true',
          handler: function (newV, oldV) {
            console.log(newV[0].name);
          }
        }
      },
      methods: {}
    });
  </script>
  <hr />

  <!-- 计算属性computed 具有监听并计算数据能力,可留缓存-->
  <hr />
  <div id="app7">
    <p>{{msg}}</p>
    <button @click="changeData">{{reverseMsg}}</button>
    <span>{{forLang}}</span>
  </div>
  <script>
    let app7 = new Vue({
      el: '#app7',
      data: {
        msg: 'hihihi',
        obj: [{ java: 2000 }, { python: 1000 }, { javascript: 500 }]
      },
      methods: {
        changeData() {
          this.msg = 'new Value';
        }
      },
      // changeData -> 视图->数据->视图
      computed: {
        forLang: function () {
          return this.obj.forEach((item) => {
            for (let k in item) {
              return item[k];
            }
          });
        },
        reverseMsg: function () {
          return this.msg.split('').reverse().join('');
        }
      }
    });
  </script>
  <hr />
</html>
